<template>
    <div>     
        <mh></mh>      
        <main class="" id="main-collapse">
            <div>
                <!--面包屑导航 通过：进行传参操作-->
                <bread :datas="this.datas"></bread>
                <!-- 声明表单 绑定错误提示 绑定规则 绑定数据 -->
              
                <Form
                ref="form"
                :showErrorTip="showErrorTip"
                :rules="rules"
                :model="model"
                >
                    <FormItem label="用户名11" prop="username">
                        <template v-slot:label>  用户名 </template>
                        <input type="text" v-model="model.username">
                    </FormItem>
                    <FormItem label="密码"  prop="password">
                        <input type="password" v-model="model.password">
                    </FormItem>
                    <FormItem>
                        <Button color="primary" :loading="isLoading" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
                        <Button @click="reset">重置</Button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="http://localhost:8000/static/sina.png" @click="sina">
                    </FormItem>
                </Form>        
            </div>
          
        </main>
     
    </div>
</template>
      
      
       
<script>  
    import mh from './mh.vue'
    // 导入面包屑导航组件
    import bread from './bread.vue'
    export default {
        data () {
            return {
                msg: "这是一个变量",
                //进度条
                isLoading:false,
                //用户数据
                model:{
                    username:'',
                    password:'',
                    keyi_bind:false
                },
                //规则
                rules:{
                    //非空验证
                    required:['username','password']
                },
                //错误提示
                showErrorTip:true,
                //面包屑变量
                datas:[{'title':'首页',route:{name:'index'}},{title:'登录页面'}],
            
            }
        },
        components: {
            'mh':mh,
            //声明标签
            'bread':bread
        },
        mounted:function(){
            
        },
        methods:{
            // 跳转新浪微博
            sina(){
                // 组装url
                let url = "https://api.weibo.com/oauth2/authorize?client_id=2652972383&redirect_uri=http://127.0.0.1:8000/index/"

                // 站外跳转
                window.location.href = url;
            },

            //提交
            submit(){
                //取值
                let username = this.model.username;
                let password = this.model.password;

                // 请求后台接口
                // 定义一个传递变量
                var _this = this;
                this.axios.post('http://localhost:8000/login/',this.qs.stringify({
                    // 设置参数
                    username:username,
                    password:password
                    
                })).then(function(result){
                    // 判断是否注册成功
                    if(result.data.code==200){

                        console.log(result);
                        // 跳转页面
                        _this.$router.push('/');

                        //将用户名存储到webstorage
                        localStorage.setItem('username',result.data.username);

                    }else{

                        //alert(result.data.message);
                        // 组件式提醒
                        // _this.$Notice(result.data.message);
                        _this.$Message(result.data.message);
                    }
                })
            },
            //重置
            reset(){
                this.$Confirm('确定重置？', '重置').then(() => {

                this.$Message.success('确定重置！');
                 //1将内容置空
                this.model.username = '';
                this.model.password = '';

                }).catch(() => {
                    this.$Message.error('取消');
                });

            },
            
        }
    }
        
</script>
       
<style>



</style>